<template>
  <div>
    <el-menu
        :default-active="currentPath"
        router
        mode="horizontal"
        background-color="#EEE9E9"
        text-color="black"
        active-text-color="#EE9572"
        style="min-width: 1300px">
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        {{ item.navItem }}
      </el-menu-item>

      <el-submenu style="float:right;margin-right: 10px;">
        <template slot="title">管理中心</template>
        <el-menu-item onclick="javascript:window.open('http://localhost:8888/')">聊天室</el-menu-item>
        <el-menu-item v-if="this.role==='admin'" onclick="javascript:window.open('/admin/ArticleManagement')">博客管理</el-menu-item>
        <el-menu-item v-if="this.role==='admin'" onclick="javascript:window.open('/admin/libraryManagement')">图书管理</el-menu-item>
        <el-menu-item v-on:click="logout">注销</el-menu-item>
      </el-submenu>

      <span style="position: absolute;padding-top: 20px;right: 40%;font-size: 20px;font-weight: bold">BLC MS——Blog、Library and Chatroom</span>
      <span style="position: absolute;padding-top: 20px;right: 13%;font-size: 16px;font-weight: bold">{{welcome}}</span>
<!--      <i class="el-icon-switch-button" title="注销" v-on:click="logout" style="float:right;font-size: 40px;color: #222;padding: 10px;margin-right: 10px;"></i>-->

    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'NavMenu',
  data () {
    return {
      navList: [
        {name: '/index', navItem: '首页'},
        {name: '/blog', navItem: '博客'},
        {name: '/library', navItem: '书架'},
        // {name: '/login', navItem: '管理中心'}
      ],
      keywords: '',
      welcome:'游客访问',
      role:'',
    }
  },
  computed: {
    currentPath () {//default-active: 当前激活菜单的 index
      return this.$route.path//点哪里亮哪里
      /*var x = this.$route.path.indexOf('/', 1)
      if (x !== -1) {
        return this.$route.path.substring(0, x)
      } else {
        return this.$route.path
      }*/
    }
  },
  created() {
    this.checkName()
    //不是游客，就判断role
    if(this.welcome!='游客访问'){
      this.checkRole(JSON.parse(window.localStorage.getItem('user')).username)
    }
  },
  methods: {
    checkName(){//检查localstorage中的username是否真的存在，存在就生成欢迎词
      this.welcome=window.localStorage.getItem('user') == null ? '' : JSON.parse(window.localStorage.getItem('user')).username
      var _this = this
      var url = '/login/check?username='+_this.welcome
      this.$axios.get(url)
          .then(resp => {
            if (resp.data.code === 200) {
              _this.welcome='欢迎您：'+this.welcome
            } else {
              _this.welcome='游客访问'
            }
          })
          .catch(failResponse => {
          })
    },
    checkRole(username){
      // alert(username)
      var _this = this
      var url = '/user/role?username='+username
      this.$axios.get(url)
          .then(resp => {
            if (resp.data.code === 200) {
              // console.log(resp.data)
              _this.role=resp.data.result
              // alert(_this.role)
            } else {
              _this.role=''
            }
          })
          .catch(failResponse => {
          })
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    logout () {
      var _this = this
      this.$axios.get('/logout').then(resp => {
        if (resp.data.code === 200) {
          // 前后端状态保持一致
          _this.$store.commit('logout')
          _this.$router.replace('/login')
        }
      }).catch(failResponse => {})
    }
  },
}
</script>

<style scoped>
a{
  text-decoration: none;
}

/*span {
  pointer-events: none;!*阻止用户的点击动作产生任何效果*!
}*/
.el-icon-switch-button {
  cursor: pointer;
  outline:0;/*取消按table键切换时出现的默认自带的很丑的框*/
}

</style>
